<template>
  <div class="filter">
    <!-- 分类 -->
    <div class="row">
      <div class="name">分类：</div>
      <ul class="property">
        <li class="item">全部</li>
        <li class="item" v-for="cate in list" :key="cate.id">{{ cate.category.name }}</li>
      </ul>
    </div>
    <!-- 配送地址 -->
    <div class="row">
      <div class="name">配送地址：</div>
      <ul class="property">
        <li class="item">全部</li>
        <li class="item" v-for="addr in address" :key="addr.id">{{ addr.name }}</li>
      </ul>
    </div>
    <!-- 排序 -->
    <div class="row">
      <div class="name">排序：</div>
      <ul class="property">
        <li class="item">默认</li>
        <li class="item">
          价格
          <div class="sort-price"></div>
        </li>
        <li class="item">
          上架时间
          <i class="iconfont icon-xiangxiajiantou"></i>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 分类
    classify: {
      type: Array,
      default: () => []
    },
    // 配送地址
    address: {
      type: Array,
      default: () => []
    },
    // 商品及属性列表
    list: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/variable";

.filter {
  background: @write;
  border-bottom: 1px solid #eaeaea;
  margin: 10px 40px;
  .row {
    border-bottom: 1px dashed @line-color-light1;
    font-size: 14px;
    padding: 20px 0px 0px;
    .name {
      color: @font-color-grey;
      float: left;
      width: 80px;
    }
    .property {
      color: @font-color;
      .item {
        cursor: pointer;
        display: inline-block;
        margin-right: 30px;
        margin-bottom: 20px;
        .active {
          color: @font-color-golden;
          .iconfont {
            color: @font-color-golden;
          }
        }
        .sort-price {
          color: #abaaab;
          display: inline-block;
          position: relative;
          &:after {
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 4px solid #abaaab;
            content: " ";
            display: block;
            top: -6px;
            position: absolute;
          }
          &:before {
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 4px solid #abaaab;
            content: " ";
            display: block;
          }
          .up {
            &:after {
              border-bottom: 4px solid #b4a078;
            }
          }
          .down {
            &:before {
              border-bottom: 4px solid #b4a078;
            }
          }
        }
        &:hover {
          color: @font-color-golden;
        }
      }
    }
    &:last-child {
      border-bottom: 0px;
    }
  }
}
</style>
